<template>
    <v-data-table
            v-model="selected"
            :headers="headers"
            :items="tempTables"
            :single-select='false'
            item-key="templateName"
            @input="itemSelected"
            hide-default-footer
            disable-pagination
            show-select
            class="elevation-1">
        <template v-slot:top>
            <v-select v-model="proSelectValue"
                      :items="projects"
                      item-text="projectName"
                      item-value="id"
                      @change="onProSelected"
                      label="请选择模板所属的项目"
                      solo
            ></v-select>
        </template>
    </v-data-table>
</template>

<script>

    export default {
        data () {
            return {
                proSelectValue: '',
                tempTables:[],   //table内容
                selected: [],  //table选择项目
                projects: [],
                headers: [
                    { text: '模板所属项目', value: 'projectName' },
                    { text: '模板名称', value: 'templateName' }
                ]
            }
        },
        created () {
            this.initialize()
        },
        methods:{
            initialize(){
                this.projects = this.$db.get('project_config').value()
            },
            async onProSelected(value) {

                if(value) {//提交有值
                    this.tempTables  = this.$db.get('template_config')
                        .filter({projectId: value})
                        .value()

                }else{ //取消之后,清空选项
                    this.proSelectValue = '';
                }
            },
            itemSelected(value) {
                this.$emit('template-selected',value);     // 设置默认选中
            },
            confirmSelect(){
                this.$dialog.confirm({
                    text: '请先勾选生成代码使用的模板',
                    actions:{true: '知道了'}
                })
            }
        }
    }
</script>